import { defineComponent, toRefs, PropType } from "vue";


import MainNodeProcessWrap from '@src/modules/trigger/components/ProcessNodeChart/components/MainNodeProcessWrap'
import ArrowLine from '@src/modules/trigger/components/ProcessNodeChart/components/ArrowLine'
import AddOperatorNode from '@src/modules/trigger/components/ProcessNodeChart/components/AddOperatorNode'
import { useCurrentInstance } from '@src/modules/trigger/hooks/useVC.ts'
import '@src/modules/trigger/components/ProcessNodeChart/style/node.scss'
/* type */
import type { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'

export default defineComponent({
    name: 'startNode',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: ()=> {}
        }
    },
    setup(props) {
        const { nodeData } = toRefs(props)
        const [currentCtx, setData] = useCurrentInstance()
        const h = currentCtx?.$createElement

        const clickAppHandler = () => {
            console.log('clickAppHandler')
        }

        const clickTriggerHandler = () => {
            console.log('clickTriggerHandler')
        }
        const clickActionHandler = () => {
            console.log('clickActionHandler')
        }
        const startNode = h('div', {class: 'process-text'}, [
            '请选择',
            h('span', {class: 'process__cicle', on: { click: clickAppHandler} }, '应用对象'),
            '和',
            h('span', {class: 'process__text', on: { click: clickTriggerHandler }}, '触发事件')
        ])

        const actionNode = h('div', {class: 'process-text'}, [
            '请选择',
            h('span', {class: 'process__cicle', on: { click: clickAppHandler}}, '应用对象'),
            '和',
            h('span', {class: 'process__text', on: { click: clickActionHandler}}, '执行动作')
        ])
        const defaultText = h('div', {class: 'process__default-text'}, '请选择')


        // const closeNode = () => {
        //     currentCtx.$eventBus.$emit('trigger-design-deleteNodeChange', nodeData.value)
        // }

        return ()=> (
            <div class="process-node-normal__container">
                <div class="process-node-normal__box">
                    <div class="process-node-normal__box-wrap">
                        <div class="process-node-normal__box-top">
                            <div class="top_content">
                                <div class="process-input-id">1.</div>
                                <div>{nodeData.value.type}</div>
                            </div>
                        </div>
                        <div class="process-node-normal__box-content">
                            {nodeData.value.uniqueId}
                            {/* {startNode} */}
                        </div>
                    </div>
                    <ArrowLine></ArrowLine>
                    <AddOperatorNode nodeData={nodeData.value}></AddOperatorNode>
                </div>
    
                <div class="process-node-normal__children">
                    {/* {
                        nodeData.value.children.map(nodeItem => {
                            return (
                                    <MainNodeProcessWrap 
                                        nodeIndex={1}
                                        nodeList={nodeItem.children}
                                        nodeData={nodeItem}/>
                            )
                        })
                    } */}
                </div>
             
            </div>
        )
    }
})